<template>
    <view class="detail">
        <view class="backBtn" @click="goBack">
            <text class="iconfont icon-fanhui"></text>
        </view>

        <u-swiper :list="goodsDetail.mainPictures" height="390" :autoplay="false"
                  @change="e => currentSwiperImg = e.current">
            <view slot="indicator" class="indicator-num">
                <text class="indicator-num__text">
                    {{ currentSwiperImg + 1 }}/{{ goodsDetail.mainPictures.length }}
                </text>
            </view>
        </u-swiper>

        <view class="price">
            <view class="left">
                <text>￥</text>
                <text>{{ goodsDetail.price }}</text>
            </view>
            <view class="right" v-if="brandName">{{ brandName }}</view>
        </view>

        <view class="desc">
            <view class="title">{{ goodsDetail.name }}</view>
            <view class="tags" v-if="goodsDetail.desc">
                <text v-for="(tag, i) in goodsDetail.desc" :key="i">{{ tag }}</text>
            </view>
        </view>

        <view class="divider"></view>

        <view content="cell-group">
            <cell-item title="已选" content="" @clickShowPop="clickShowPop"></cell-item>
        </view>

        <view class="reviews">

        </view>

        <view class="similar">

        </view>

        <view class="goods-content">
            <view class="tabs">
            </view>

            <view class="content">
                <image v-for="url in goodsDetail.details.pictures" :key="url" :src="url" mode="widthFix"></image>
            </view>
        </view>

        <view class="tab-bar">
            <view class="collect">
                <view class="iconfont" :class="collectStatus ? 'icon-favorite-filling' : 'icon-favorite'"></view>
                <view>收藏</view>
            </view>
            <u-button text="加入购物车" color="linear-gradient(to right, #FFA868, #FF9240)" class="centerBtn" @click="addCart"></u-button>
            <u-button text="立即购买" color="linear-gradient(to right, #3CCEAF, #27BA9B)"></u-button>
        </view>

        <u-popup :show="showPop" @close="showPop = false" @open="open" class="popup">
            <view class="pop-content">
                <view class="desc">
                    <image src="https://yanxuan-item.nosdn.127.net/330913911087b44b0d817dd78233165f.png"></image>
                    <view class="right">
                        <view class="price">
                            <view class="newPrice">
                                <text>￥</text>
                                <text>{{ goodsDetail.price }}</text>
                            </view>
                            <view class="oldPrice">
                                <text>￥{{ goodsDetail.oldPrice }}</text>
                            </view>
                        </view>

                        <view class="other">
                            <!--<text>重量：</text>-->
                            <!--<text></text>-->
                            <text>编号：{{ goodsDetail.id }}</text>
                        </view>
                    </view>
                </view>
            </view>
        </u-popup>
    </view>
</template>

<script>
import { getGoodsDetail } from '@/api/goods'
import { addCart } from '@/api/cart'

export default {
    onLoad(query) {
        this.getGoodsDetail(query.id)
    },
    data() {
        return {
            goodsDetail: {
                mainPictures: [],
                details: {},
                brand: {}
            },
            currentSwiperImg: 0,
            collectStatus: false,
            showPop: false
        }
    },
    methods: {
        goBack() {
            this.$goBack()
        },
        async getGoodsDetail(id) {
            const res = (await getGoodsDetail(id)).result
            if (!res.desc) return this.goodsDetail = res
            if (res.desc.substr(res.desc.length - 3, 3).toUpperCase() === 'APP') {
                let descStr = res.desc.substr(0, res.desc.length - 3).split('，').join('-')
                descStr = descStr.split(',').join('')
                descStr = descStr.split('-')
                res.desc = descStr
            }
            this.goodsDetail = res
            console.log(this.goodsDetail)
        },
        clickShowPop(e) {
            this.showPop = true
            console.log(e)
        },
        open() { },
        close() {
            this.show = false
        },
        async addCart() {
            const res = await addCart({
                skuId: this.goodsDetail.skus[0].id,
                count: 1
            })
            if (res.code === '1') uni.showToast({
                title: '加入购物车成功',
                icon: 'success'
            })
        }
    },
    computed: {
        brandName() {
            return this.goodsDetail.brand?.name
        }
    }
}
</script>

<style scoped lang="scss">
.detail {
    .backBtn {
        position: absolute;
        z-index: 9;
        color: white;
        background-color: rgba(0, 0, 0, 0.35);
        width: 60rpx;
        height: 60rpx;
        text-align: center;
        line-height: 60rpx;
        border-radius: 30rpx;
        top: 30rpx;
        left: 20rpx;

        text {
            font-size: 42rpx;
        }
    }

    ::v-deep .u-swiper {
        .u-swiper__indicator {
            right: 40rpx;

            .indicator {
                @include flex(row);
                justify-content: center;

                &__dot {
                    height: 6px;
                    width: 6px;
                    border-radius: 100px;
                    background-color: rgba(255, 255, 255, 0.35);
                    margin: 0 5px;
                    transition: background-color 0.3s;

                    &--active {
                        background-color: #FFFFFF;
                    }
                }
            }

            .indicator-num {
                padding: 2px 0;
                background-color: rgba(0, 0, 0, 0.35);
                border-radius: 100px;
                width: 35px;
                @include flex;
                justify-content: center;

                &__text {
                    color: #FFFFFF;
                    font-size: 12px;
                }
            }
        }
    }

    > .price {
        display: flex;
        justify-content: space-between;
        align-items: center;
        background-image: linear-gradient(90deg, #3CCEAF, #27BA9B);
        padding: 20rpx;

        .left {
            color: white;

            text:first-child {
                font-size: 28rpx;
            }

            text:last-child {
                font-size: 40rpx;
            }
        }

        .right {
            color: #333333;
            background-color: white;
            padding: 12rpx 24rpx;
            border-radius: 6rpx;
        }
    }

    .desc {
        padding: 20rpx;

        .title {
            font-size: 32rpx;
            color: #333333;
        }

        .tags {
            font-size: 24rpx;
            color: #CF4444;
            margin-top: 18rpx;

            text {
                margin-right: 10rpx;
            }
        }
    }

    .divider {
        width: 100%;
        height: 2rpx;
        background-color: #F7F7F7
    }

    .cell-group {

    }

    .popup {
        .pop-content {
            .desc {
                display: flex;

                image {
                    width: 255rpx;
                    height: 255rpx;
                    border-radius: 6rpx;
                }

                .right {
                    display: flex;
                    flex-direction: column;
                    justify-content: end;
                    margin-left: 20rpx;

                    .price {
                        display: flex;
                        font-size: 28rpx;
                        margin-bottom: 6rpx;

                        .newPrice {
                            color: #CF4444;
                            margin-right: 20rpx;

                            text:last-child {
                                font-size: 42rpx;
                            }
                        }

                        .oldPrice {
                            text-decoration-line: line-through;
                            display: flex;
                            flex-direction: column;
                            justify-content: end;
                            color: #999999;
                        }
                    }

                    .other {
                        color: #555555;
                        font-size: 26rpx;
                    }
                }
            }
        }
    }

    .goods-content {
        padding-bottom: 120rpx;

        .content {
            image {
                display: block;
                width: 100%;
            }
        }
    }

    .tab-bar {
        box-sizing: border-box;
        width: 100%;
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 20rpx;
        background-color: white;
        position: fixed;
        bottom: 0;
        border-top: 2rpx solid #EAEAEA;

        .collect {
            width: 160rpx;
            text-align: center;
            margin: 0 40rpx 0 20rpx;

            view {
                font-size: 26rpx;
                color: #27BA9B;
            }

            .iconfont {
                font-size: 40rpx;
            }
        }

        .centerBtn {
            margin-right: 20rpx;
        }
    }
}
</style>
